<template>
  <el-row>
    <el-col :span="22">
      <el-card shadow="always">
        <el-row>
          <el-col :span="8" style="text-align: center">
            <div class="grid-content bg-purple"><img src="../../img/user.jpg"></div>
          </el-col>
          <el-col :span="16" style="margin-top: 20px">
            <div class="grid-content bg-purple-light">
              <el-row>
                <el-col :span="9"
                        v-for="(item, index) in Student_profile"
                        :key="index"
                        class="studentSpan">
                  <div>
                    <el-row class="studentSpanContent">
                      <el-col :span="12"><div><span>{{item.name}}</span></div></el-col>
                      <el-col :span="12"><div><span>{{Student_profile_data[item.data]}}</span></div></el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    name: "userBriefIntroduction",
    data() {
      return {
        Student_profile: [{
          name: '姓名 ：',
          data: 'name'
        }, {
          name: '学院 ：',
          data: 'college'
        }, {
          name: '专业 ：',
          data: 'professional'
        }, {
          name: '班级 ：',
          data: 'class'
        }, {
          name: '学号 ：',
          data: 'number'
        }],
        Student_profile_data: {
          name: '张三',
          college: '互联网金融与信息工程学院',
          professional: '软件工程',
          class: '17软件工程1班',
          number: '17B543153',
        }
      }
    }
  }
</script>

<style scoped>
  img{
    max-height:275px;
  }

  .studentSpan{
    margin: 20px 0;
    font-size: 20px;
  }
  .studentSpanContent{
    margin-left: 20px;
  }
</style>
